<template>
  <div style="height:100%;">

    <xy-drawer v-model="drawerStatus"></xy-drawer>

    <v-content style="height:100%">

      <transition :name="transitionName" mode="out-in">
        <keep-alive :include="keepAlive">
          <router-view></router-view>
        </keep-alive>
      </transition>

    </v-content>

    <xy-bottom-navigation @barNavIconClick="barNavIconClick"></xy-bottom-navigation>

  </div>

</template>

<script>
    import xyDrawer from './Drawer';
    import xyBottomNavigation from './BottomNavigation';

    /**
     * 默认布局
     * @author Canaan
     * @date 2019/8/9 22:11.
     */
    export default {
        name: 'Home',
        mounted() {

        },
        components: {
            xyDrawer,
            xyBottomNavigation
        },
        props: {},
        data() {
            return {
                keepAlive: ["tastyIndex"],
                drawerStatus: null,
                transitionName: ""
            }
        },
        computed: {},
        methods: {
            barNavIconClick() {
                this.drawerStatus = !this.drawerStatus
            }
        },
        watch: {
            '$route'(to, from) {
                let fixedKeepAlive = ["tastyIndex"];
                this.transitionName = to.meta.index <= from.meta.index ? 'slide-right' : 'slide-left';
                if (to.name === 'tastyIndex') { //如果返回首页，那么注销所有的页面
                    this.keepAlive = fixedKeepAlive;
                } else if (to.meta.index === 1) { //如果是二级页面，那么就缓存
                    fixedKeepAlive.push(to.name);
                    this.keepAlive = fixedKeepAlive;
                }

            }
        },
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .slide-left-enter {
    transform: translate(0);
  }

  .slide-left-enter-active {
    transition: all 0.25s ease-in-out;
  }

  .slide-left-leave-active {
    transform: translate(-100%);
    transition: all 0.25s ease-in-out;
  }


  .slide-right-enter {
    transform: translateX(0);
  }

  .slide-right-enter-active {
    transition: all 0.25s ease-in-out;
  }

  .slide-right-leave-active {
    transform: translateX(100%);
    transition: all 0.25s ease-in-out;
  }

</style>
